<template>
  <div id="leaderboard">
    <van-tabs v-model="active" scrollspy sticky offset-top="1.22666rem">
      <HotTopList />
      <TopList :topList="topListData.slice(0, 6)" :title="'精选'" />
      <TopList :topList="topListData.slice(6, 15)" :title="'曲风'" />
      <TopList :topList="topListData.slice(15, 26)" :title="'全球'" />
      <TopList :topList="topListData.slice(26, 28)" :title="'MV'" />
      <TopList :topList="topListData.slice(28, 30)" :title="'特色'" />
    </van-tabs>
  </div>
</template>

<script>
import { mapGetters } from 'vuex'
import HotTopList from './components/HotTopList.vue'
import TopList from './components/TopList.vue'
export default {
  name: 'Leaderboard',
  data () {
    return {
      active: 0
    }
  },
  components: { HotTopList, TopList },
  created () {
    this.loadTopList()
  },
  computed: {
    ...mapGetters(['topListData'])
  },
  // 定义方法
  methods: {
    loadTopList () {
      this.$store.dispatch('music/getTopList')
    }
  }
}
</script>

<style scoped lang="less">

</style>
